import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
/**
 * 1 数据存放在哪个组件内
 * 依据：那些组件使用数据，Add组件需要往里面写，List组件需要读取，因此写到MyApp中；
 * 某些组件都需要使用数据，应该给他们拥有的父亲。
 * 2 在子组件中改变父组件的状态：
 * -- 1 子组件中不能直接改变父组件的状态
 * -- 2 状态在哪个组件，更新状态的行为就应该定义在哪个组件
 * 解决方案：父组件定义函数，传递给子组件，子组件调用
 * 3 本例子讲解如何使用state ，props 和ref三个参数
 */
class MyApp extends React.Component{
  constructor(props){
    super(props);
    this.state={
      inputValues:['aa','bb','cc']
    }
    this.addInputValues = this.addInputValues.bind(this)
  }

  addInputValues(inputValue){
    const inputValues = this.state.inputValues;
    inputValues.unshift(inputValue);
    this.setState({inputValues});
  }

  render(){
    const {inputValues} = this.state;
    return(
      <div>
        <h2>Simple TODO List</h2>
        <Add count={inputValues.length} addInputValues={this.addInputValues}/>
        <List inputValues={inputValues}/>
      </div>
    );
  }
}


class Add extends React.Component{
  constructor(props){
    super(props);
    this.handlerClick = this.handlerClick.bind(this);
  }
  handlerClick(){
    const inputValue = this.input.value.trim();
    if(!inputValue){
      return(
        alert('输入不能为空')
      )
    }
    console.log(inputValue);
    this.props.addInputValues(inputValue);
    this.input.value='';
  }
  render(){
    return(
      <div>
        <input type="text" ref={input => this.input =input}/>
        <button onClick={this.handlerClick}>ADD #{this.props.count+1}</button>
      </div>
    );
  }
}

Add.propTypes={
  count:PropTypes.number.isRequired
}

class List extends React.Component{

  render(){
    const inputValues = this.props.inputValues;
    
    return(
      <ul>
        {inputValues.map((inputValue, index) => <li key={index}>{inputValue}</li>)}
      </ul>
    );
  }
}

List.propTypes = {
  inputValues: PropTypes.array
}
ReactDOM.render(<MyApp /> , document.getElementById('root'));